import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PAGE_ELEMENTS, SUPPORTED_PLATFORMS } from '../../../../../../../../types/constants'
import { SoCommonPage } from './common'

export class SoNotFoundWenkuPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoNotFoundWenkuPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoNotFoundWenkuPage {
    if (!SoNotFoundWenkuPage.instance) {
      SoNotFoundWenkuPage.instance = new SoNotFoundWenkuPage()
    }
    return SoNotFoundWenkuPage.instance
  }

  init(): void {
  }

  getMainStyles(): string {
    return `
/* 顶部菜单 */
#header {
  background-color: var(${this.themeVarService.search.header.background}) !important;
  
  .inner {
    background-color: transparent !important;
    padding: 0 !important;
    
    .inn {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      margin: 0 !important;
      padding: 20px 0 !important;
      width: 100% !important;
      
      #g-hd {
        #g-hd-nav {
          ${this.commonPage.tabStyles('g-hd-cur', false)}
        }
      }
    }
  }
}

/* 主内容 */
.main {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    .page404-advice {
      p {
        color: var(${this.themeVarService.search.default.text}) !important;
        
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
    }
}

/* 页脚 */
${this.commonPage.footStyles()}
#ft {
  position: fixed !important;
  bottom: 5px !important;
  width: 100% !important;
  
  .footer {
    background-color: transparent !important;
    line-height: unset !important;
  }
}
    `
  }
}
